<template>
  <div class="am-content">
    <div class="detail-info-box">
      <ul class="detail-info">
        <li><span>报警人姓名: </span> <span>{{ alarmRecord.userName }}</span></li>
        <li><span>性别: </span> <span>{{ alarmRecord.sex }}</span></li>
        <li><span>身份证号: </span> <span>{{ alarmRecord.idCard }}</span></li>
        <li><span>手机号码: </span> <span>{{ alarmRecord.phone }}</span></li>
        <li><span>定位: </span> <span>{{ alarmRecord.address }}</span></li>
        <li><span>报警时间:</span> <span>{{ alarmRecord.alarmDate }}</span></li>
      </ul>
      <ul class="detail-info">
        <li><span>接警民警: </span> <span>{{ alarmRecord.officerName }}</span></li>
        <li><span>警号: </span> <span>{{ alarmRecord.officerAccount }}</span></li>
        <li><span>隶属部门: </span> <span>{{ alarmRecord.deptName }}</span></li>
      </ul>
    </div>
    <div class="videos">
      <template v-for="(item, index) in alarmRecord.videoSrcList">
        <video v-bind:key="index" width="500px" height="500px" v-bind:src="item | fileFilter"
               controls="controls"></video>
      </template>
    </div>
  </div>
</template>

<script>
import CommonFilters from "@/mixins/CommonFilters";
import HttpConnection from "@/util/HttpConnection";

export default {
  name: "VideoAlarmRecordDetail",
  mixins: [CommonFilters],
  data() {
    return {
      alarmRecord: {}
    };
  },
  mounted() {
    let that = this;
    HttpConnection.get("/api-bureau/portal/acceptance/detail", {
      params: {
        id: that.$route.query.id
      }
    }).then(function (response) {
      that.alarmRecord = response.data
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.am-content {
  padding: 20px;
  background-color: #ffffff;
}

ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
}

.detail-info-box {
  display: flex;
  flex-direction: row;
  border: 1px solid #e8e8e8;
  padding: 20px 0px;
  margin: 0px 0px 40px 0px;
}

.detail-info {
  li {
    margin: 10px 0px 10px 0px;
    color: #333333;

    span:nth-of-type(1) {
      display: inline-block;
      width: 100px;
      text-align: right;
      margin: 0px 6px 0px 0px;
    }
  }
}

.videos {
  video {
    margin: 0px 20px;
  }
}
</style>
